import React, {useCallback, useMemo, useState} from 'react';
import {Text, View, StyleSheet, ScrollView, Dimensions, Image, TouchableOpacity} from 'react-native';
const width = parseInt((Dimensions.get('window').width - 40) / 8 - 10);
const ScrollColorView = ({colorBlocks, onSelect}) => {
  const [isShow, setIsShow] = useState(false);
  const colorList = useMemo(() => {
    if (colorBlocks.length > 3) {
      if (isShow) {
        return colorBlocks;
      } else {
        return [colorBlocks[0], colorBlocks[1], colorBlocks[2]];
      }
    } else {
      return colorBlocks;
    }
  }, [colorBlocks, isShow]);
  if (colorList.length <= 1) {
    // 展示色块
    return <View style={styles.colorBlocksView}></View>;
  }
  // console.log(colorList, 'colorList');
  const onLayout = e => {
    console.log(e.nativeEvent.layout.width / 4, width);
  }
  const onShowMore = () => {
    setIsShow(true)
  }
  const onChange = useCallback(item => ()=> {
    // onSelect(item.option_value_id)
    console.log(item.option_value_id)
  }, []);
  return (
    <View onLayout={onLayout} style={styles.colorBlocksView}>
      <ScrollView horizontal={true}>
        {colorList.map((item, index) => {
          // console.log(item, 'item')
          return (
            <TouchableOpacity onPress={onChange(item)}>
              <View key={index} style={[styles.colorItem]}>
                <Image style={styles.img} source={{uri: item.image}}></Image>
              </View>
          </TouchableOpacity>
          );
        })}
        {!isShow && colorBlocks.length > 3 ? (
          <TouchableOpacity onPress={onShowMore}>
            <View style={styles.colorItem}>
              <Text>2</Text>
            </View>
          </TouchableOpacity>
        ) : null}
        {/* <View style={styles.colorItem}>
          <Text>2</Text>
        </View>
        <View style={styles.colorItem}>
          <Text>3</Text>
        </View>
        <View style={styles.colorItem}>
          <Text>4</Text>
        </View>
        <View style={styles.colorItem}>
          <Text>5</Text>
        </View> */}
      </ScrollView>
    </View>
  );
};

export default ScrollColorView;

const styles = StyleSheet.create({
  colorBlocksView: {
    width: '100%',
    paddingVertical: 3,
    height: width + 6,
    backgroundColor: '#f40',
  },
  colorItem: {
    width: width,
    height: width,
    borderRadius: 50,
    overflow: 'hidden',
    marginLeft: 10,
    backgroundColor: 'green',
    // DeepGery
    // Army green
  },
  img: {
    width: width,
    height: width,
  }
});
